<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
</head>
<style>
    .container {
        height: 500px;
        width: 500px;
        background-color: gray;
        display: flex;
        /* flex-direction: column; */
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
    }

    .box1{
        height: 100px;
        width: 100px;
        background-color: pink;
    }

    .box1:nth-child(5) {
        flex-grow: 2;
    }
</style>
<body>
    <!-- 
        1. flex[flexible box]布局（弹性盒布局） [display:flex]
            a. 任何要容器都可以指定为flex布局，包括块级元素和行内元素
            b. 设为flex布局以后，子元素的float clear vertical-align属性将失效 
            
        2. 采用flex布局的元素，称为flex容器（flex container），他的所有子元素自动成为容器成员，称为flex项目（flex item）
            容器默认两根轴： 水平的主轴（main axis） 垂直的交叉轴（cross axis）
                            主轴与容器的交叉：main start | main end    交叉轴与容器的交叉：cross start | cross end
                            单个项目占据的主轴空间 main size  占据的交叉轴空间 cross size

        3. flex container 属性
            a. flex-direction: row | row-reverse | column-reverse | column [主轴方向]
            b. flex-wrap: nowrap | wrap | wrap-reverse [是否换行]
            c. flex-flow [1 2的简写形式]
            d. justify-content: center | flex-start | flex-end | space-between | space-around  [主轴对齐方式]
            e. align-items: center | flex-start | flex-end | baseline | stretch(如果item没有设置高度或者auto 就会撑满整个容器)  [交叉轴对齐方式]
            f. align-content: center | flex-start | flex-end | space-between | space-around   [多根轴线对齐方式] 

        4. flex item 属性
            a. order [排列顺序]
            b. flex-grow [放大比例]
            c. flex-shrink [缩小比例]
            d. flex-basis [在分配给多余空间之前盖项目占据主轴空间]
            e. flex [2 3 4简写]
            f. align-self [允许单个项目与其他项目不一样的对齐方式]


        5. 常见情况
            a. 没有设置flex-wrap 但是item的宽度总和已经超过了container的宽度——压缩item的宽度，达到把container宽度平均分配的目的
            b. 
     -->

     <div class="container">
         <div class="box1">1</div>
         <div class="box1">2</div>
         <div class="box1">3</div>
         <div class="box1">4</div>
         <div class="box1">5</div>
         <div class="box1">6</div>
         <div class="box1">7</div>
         <div class="box1">8</div>
         <div class="box1">9</div>
         <div class="box1">10</div>
     </div>
</body>
</html>